<template>
	<!-- 商品管理 -->
	<view class="shopManagement-main">
		<!-- 搜索 -->
		<view class="shopManagement-search">
			<u-search
				placeholder="请输入搜索内容"
				v-model="shopQuery.keyword"
				shape="round"
				:clearabled="true"
				bgColor="#fff"
				:showAction="false"
				style="margin-top: 2px"
				@search="getSearch"
				@clear="getSearch"
			></u-search>
			<view class="shopManagement-search-addShop" @click="gotoPath('/pages/storeSide/addShop/addShop')" v-if="storeType != 2">
				<u-icon name="plus-circle" size="18" color="#fff" style="margin-top: 4rpx"></u-icon>
				<text style="margin-left: 8rpx">添加商品</text>
			</view>
		</view>

		<!-- 商品 -->
		<view class="shopList">
			<view class="shopFilter">
				<view class="shopFilter-left">
					<uni-segmented-control style="width: 180px" :current="shopQuery.open" :values="items" active-color="#2979ff" @clickItem="onClickItem" style-type="text" />
				</view>
				<view class="shopFilter-right">
					<view style="display: flex; align-items: center; color: #777" @click="gotoPath('/pages/storeSide/shopStore/shopStore')" v-if="storeType == 0 || storeType == 2">
						<text style="font-size: 26rpx">导入商品</text>
						<uni-icons type="download" size="20" style="margin-left: 6rpx" color="#777"></uni-icons>
					</view>
				</view>
			</view>
			<view class="shopList-content">
				<view class="classify-list" :style="bottomStyle">
					<scroll-view scroll-y class="scrollSty">
						<view class="classify-item" v-for="item in categoryList" :key="item.id" :class="[isActive == item.id ? 'active' : '']" @click="changeFilter(item.id)">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
				<view class="shopBox" >
					<view v-if="shopList.length > 0" style="height: 100%;overflow-y: scroll;box-sizing: border-box;" :style="bottomStyle">
						<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
							<view class="shopSellItem" v-for="(jitem, index) in shopList" :key="jitem.id">
								<view class="hwxcShopSell-main">
									<view class="hwxcShopSell-content" @click="gotoShop(jitem.id)">
										<view class="hwxcShopSell-left">
											<image :src="imageUrls(jitem.fileUrl)" class="images"></image>
											<!-- 0:下架 1：正常 2：审核中 -->
											<view class="hwxcShopSell-tags">
												<uni-tag text="审核中" type="default" v-if="jitem.status == '2'" size="mini"></uni-tag>
												<uni-tag text="已上架" type="primary" v-else-if="jitem.status == '1'" size="mini"></uni-tag>
												<uni-tag text="商品下架" type="error" v-else-if="jitem.status == '0'" size="mini"></uni-tag>
											</view>
										</view>
										<view class="hwxcShopSell-right">
											<view class="title">
												<view class="name">
													{{ jitem.name }}
												</view>
											</view>
											<view class="specification">
												{{ jitem.spec }}
											</view>
											<view class="corporation">
												{{ jitem.factory }}
											</view>
											<view class="price">
												<text class="num">
													<text style="font-size: 12px">¥</text>
													{{ jitem.price }}
												</text>

												<text style="padding-left: 10rpx; color: #999" v-if="jitem.artid">
													批发价：
													<text style="font-size: 12px">¥</text>
													{{ jitem.saleprice }}
												</text>
											</view>
										</view>
									</view>
									<view class="hwxcShopSell-btn">
										<view v-if="jitem.status != '2'">
											<view class="btnSty" v-if="jitem.status == '0'" @click.stop="getGoodsUp(jitem.id)">上架</view>
											<view class="btnSty" v-if="jitem.status == '1'" @click.stop="getGoodsDown(jitem.id)">下架</view>
										</view>
										<view class="btnSty" @click.stop="changePriceOpen(jitem)">改价</view>
										<view class="btnSty" @click.stop="getGoodsDel(jitem.id)" v-if="jitem.status != '1'">删除</view>
										<view class="btnSty" @click.stop="openShopInfo(jitem.id)">详情</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view v-else>
						<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
					</view>
				</view>
			</view>
			<!-- 商品价格 -->
			<u-popup :show="shopPicOpen" @close="getShopClose" :round="10" mode="bottom" :closeable="true">
				<view style="height: 90rpx; line-height: 90rpx; text-align: center; font-size: 28rpx; font-weight: bold; color: #444">商品改价</view>
				<view style="padding: 20rpx; box-sizing: border-box">
					<uni-forms ref="baseForm" :modelValue="baseFormData">
						<uni-forms-item label="商品价格" required label-width="100px">
							<uni-easyinput v-model="baseFormData.shop_pic" placeholder="请输入商品价格" />
						</uni-forms-item>
					</uni-forms>

					<view class="flashOpen-sub" @click="getStoreGoodsPrice" :style="bottomStyle">
						<view class="btn">确认修改</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { flashManageGoods, flashManageCategory, flashManageGoodsDel, flashManageGoodsDown, flashManageGoodsUp, storeGoodsPrice } from '../../../api/flashManage/index.js';
import { imageUrl } from '../../../utils/tools.js';
export default {
	data() {
		return {
			items: ['已下架','售卖中','审核中'],
			// 商品参数
			shopQuery: {
				category_id: '',
				page: 1,
				limit: 10,
				keyword: '',
				type: '',
				open: 1
			},
			// 商品数据
			shopList: [],
			// 分类数据
			categoryList: [],
			shopInfo: {},
			storeType: null,
			isActive: 0,
			shopPicOpen: false,
			baseFormData: {
				shop_pic: ''
			}
		};
	},

	onShow() {
		this.shopQuery.page = 1;
		this.storeType = this.$store.state.storeType;
		this.shopList = [];
		this.getflashManageGoods();
		this.getflashManageCategory();
	},
	
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '0rpx'}`;
		}
	},

	methods: {
		onClickItem(val) {
			this.shopQuery.page = 1;
			this.shopList = [];
			this.shopQuery.open = val.currentIndex;
			this.getflashManageGoods();
		},

		// 获取商品数据
		async getflashManageGoods() {
			try {
				this.shopQuery.type = this.storeType;
				const resData = await flashManageGoods(this.shopQuery);
				let list = resData.data.data || [];
				const shopListData = [...(this.shopList || []), ...list];
				this.shopList = shopListData;
				
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品搜索
		getSearch() {
			this.shopQuery.page = 1;
			this.shopList = [];
			this.getflashManageGoods();
		},

		// 图片路径拼接
		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},

		// 获取商品分类
		async getflashManageCategory() {
			try {
				const resData = await flashManageCategory({
					type: this.storeType
				});
				if (resData.code == 1) {
					this.categoryList = resData.data;
					this.categoryList.unshift({
						id: 0,
						name: '全部'
					});
				} else {
					uni.showToast({
						title: resData.msg,
						icon: 'error'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},

		openShopInfo(id) {
			uni.navigateTo({
				url: `/pages/shoppingInfo/shoppingInfo?id=${id}`
			});
		},

		// 商品上架
		async getGoodsUp(id) {
			await this.getflashManageGoodsUp(id);
		},

		// 商品下架
		async getGoodsDown(id) {
			await this.getflashManageGoodsDown(id);
		},

		// 商品删除
		async getGoodsDel(id) {
			await this.getflashManageGoodsDel(id);
		},

		// 商品上架
		async getflashManageGoodsUp(id) {
			try {
				const resData = await flashManageGoodsUp({
					id,
					type: this.storeType
				});
				uni.showToast({
					title: '上架成功',
					icon: 'none'
				});
				this.shopQuery.page = 1;
				this.shopList = [];
				this.getflashManageGoods();
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品下架
		async getflashManageGoodsDown(id) {
			try {
				const resData = await flashManageGoodsDown({
					id,
					type: this.storeType
				});
				uni.showToast({
					title: '下架成功',
					icon: 'none'
				});
				this.shopQuery.page = 1;
				this.shopList = [];
				this.getflashManageGoods();
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品删除
		async getflashManageGoodsDel(id) {
			try {
				uni.showModal({
					title: '提示',
					content: '是否要删除当前商品？',
					success: async (res) => {
						if (res.confirm) {
							const resData = await flashManageGoodsDel({
								id,
								type: this.storeType
							});
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
							this.shopQuery.page = 1;
							this.shopList = [];
							this.getflashManageGoods();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} catch (e) {
				throw Error(e);
			}
		},

		changeFilter(index) {
			this.isActive = index;
			if (index == 0) {
				this.shopQuery.category_id = '';
			} else {
				this.shopQuery.category_id = index;
			}
			this.shopQuery.page = 1;
			this.shopList = [];
			this.getflashManageGoods();
		},

		changePriceOpen(info) {
			this.shopInfo = info;
			this.baseFormData.shop_pic = this.shopInfo.price;
			this.shopPicOpen = true;
		},

		getShopClose() {
			this.shopPicOpen = false;
		},

		// 修改商品价格
		async getStoreGoodsPrice() {
			try {
				if (this.baseFormData.artid) {
					if (Number(this.baseFormData.shop_pic) < Number(this.shopInfo.saleprice)) {
						return uni.showToast({
							title: '出售价格必须大于批发价',
							icon: 'none'
						});
					}
				}
				const resData = await storeGoodsPrice({
					price: this.baseFormData.shop_pic,
					id: this.shopInfo.id,
					type: this.storeType
				});
				if (resData.code == 1) {
					this.shopPicOpen = false;
					this.shopQuery.page = 1;
					this.shopList = [];
					this.getflashManageGoods();
				} else {
					uni.showToast({
						title: resData.msg,
						icon: 'none'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		gotoShop(id) {
			uni.navigateTo({
				url: `/pages/storeSide/addShop/addShop?id=${id}`
			});
		},

		scrolltolowerFnc() {
			this.shopQuery.page ++ ;
			this.getflashManageGoods();
		}
	}
};
</script>

<style>
page {
	background-color: #2979ff;
}
</style>

<style scoped lang="scss">
.shopManagement-main {
	display: flex;
	flex-direction: column;
	.shopManagement-search {
		height: 55px;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		align-items: flex-start;
		.shopManagement-search-input {
			background-color: #fff;
			flex: 1;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding-right: 20rpx;
			height: 65rpx;
		}

		.shopManagement-search-addShop {
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			height: 65rpx;
		}
	}

	.shopList {
		flex: 1;
		background-color: #fff;
		box-sizing: border-box;
		border-top-right-radius: 32rpx;
		border-top-left-radius: 32rpx;
		.shopFilter {
			display: flex;
			align-items: center;
			height: 60px;
			box-sizing: border-box;
			padding: 0px 20rpx;
			position: relative;
			.shopFilter-left {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 30rpx;
			}

			.shopFilter-right {
				width: 200rpx;
				border-left: 1px #999 solid;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #777;
			}
		}

		.shopList-content {
			background-color: #f3f3f3;
			box-sizing: border-box;
			display: flex;
			height: calc(100vh - 115px);
			overflow: hidden;
			.classify-list {
				width: 100px;
				height: calc(100vh - 118px);
				background-color: #f3f3f3;
				.classify-item {
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #444;
					font-size: 13px;
				}

				.active {
					background-color: #fff;
					color: #2979ff;
				}
			}
			.shopBox {
				flex: 1;
				background-color: #fff;
				height: calc(100vh - 118px);
				.shopSellItem {
					background-color: #fff;
					box-sizing: border-box;
					padding: 20rpx;
				}
			}
		}
	}
}

.hwxcShopSell-main {
	.hwxcShopSell-content {
		display: flex;
		.hwxcShopSell-left {
			width: 180rpx;
			position: relative;
			.images {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
			.hwxcShopSell-tags {
				position: absolute;
				top: 4px;
				left: 4px;
			}
		}
		.hwxcShopSell-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			.title {
				font-weight: bold;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				.name {
					flex: 1;
				}
			}
			.specification {
				color: #999;
				font-size: 24rpx;
				margin-top: 6rpx;
			}
			.corporation {
				color: #999;
				font-size: 24rpx;
				margin: 6rpx 0px;
			}
			.price {
				font-size: 26rpx;
				.num {
					font-weight: bold;
					color: #f54040;
				}
			}
		}
	}

	.hwxcShopSell-btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 20rpx;
		border-top: 1px #f3f3f3 solid;
		padding-top: 20rpx;
		.btnSty {
			padding: 12rpx 25rpx;
			border-radius: 30rpx;
			background-color: #f1f1f1;
			margin-left: 20rpx;
			color: #444;
			font-size: 12px;
		}
	}
}
.flashOpen-sub {
	background-color: #fff;
	position: sticky;
	bottom: 0px;
	left: 0px;
	box-sizing: border-box;
	padding: 20rpx;
	width: 100%;
	padding-bottom: 0px;
	.btn {
		background-color: rgb(41, 121, 255);
		color: #fff;
		border: none;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10rpx;
	}
}

.scrollSty{
	height: 100%;
}
</style>
